<template>
  <div>
    <el-dialog
      title="消息记录"
      :visible.sync="dialogVisible"
      width="30%"
      class="dialog"
      v-loading="loading"
      element-loading-background="rgba(0, 0, 0, 0.8)"
      :before-close="handleClose"
      :close-on-click-modal="false"
      center
    >
      <div class="flex-center mb15" style="font-size: 18px">
        <div class="f38">
          聊天时长：<span style="color: orange">{{ timeDifferenceMs }}</span>
        </div>
        <div class="ml15 f38" v-if="message.first_answer_time">
          首次回复等待时间：<span style="color: orange">{{
            first_answer_time
          }}</span>
        </div>
      </div>
      <div class="messageList">
        <div v-for="(item, index) in list" :key="index">
          <div :class="item.sender_type == 'patient' ? 'patient' : 'doctor'">
            <span
              >{{ item.sender_name }}({{
                item.sender_type == "patient" ? "患者" : "医生"
              }})</span
            >
            <span class="ml10">{{ item.time }}</span>
          </div>
          <div class="content">
            <div v-if="item.type === 'txt'">{{ item.content }}</div>
            <tablePrImg
              v-else-if="item.type === 'img'"
              :imgSrc="item.content"
              :prImgList="[item.content]"
            />
            <tablePrImg
              v-else-if="item.type === 'patientCard'"
              :imgSrc="JSON.parse(item.content).patient_pic"
              :prImgList="[JSON.parse(item.content).patient_pic]"
            />
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button
          type="primary"
          :disabled="this.params.page == '1'"
          @click="getData('pre')"
          >上一页</el-button
        >
        <el-button
          type="primary"
          :disabled="this.params.page == this.last_page"
          @click="getData('next')"
          >下一页</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { ApimessageRecord } from "@a/index";
export default {
  components: {},
  props: {},
  data() {
    return {
      last_page: "",
      dialogVisible: false,
      list: [],
      message: {},
      timeDifferenceMs: 0,
      firstid: "",
      lastid: "",
      id: "",
      loading: false,
      params: {
        page: 1,
        size: 10,
      },
    };
  },
  watch: {},
  computed: {},
  methods: {
    show(id) {
      this.id = id;
      this.getData();
      this.dialogVisible = true;
    },
    handleClose() {
      this.dialogVisible = false;
      this.id = "";
      this.firstid = "";
      this.lastid = "";
      this.list = [];
      this.params = {
        page: 1,
        size: 10,
      };
    },
    getData(type) {
      this.loading = true;
      /*    const param = {
           size: 10,
           order_id: type == "pre" ? this.firstid : this.lastid,
           page_type: type,
         }; */
      if (type == "next") {
        this.params.page++;
      } else if (type == "pre") {
        this.params.page--;
      }
      ApimessageRecord({ ...this.params, order_id: this.id })
        .then((res) => {
          /*   this.firstid = res.data[0].id;
              this.lastid = res.data[res.data.length - 1].id; */
          this.list = res.data.record.data;
          this.last_page = res.data.record.last_page;
          this.message = res.data.message;
          // 计算时间差（毫秒）
          this.timeDifferenceMs = this.getTimeDifference(
            res.data.message.last_time,
            res.data.message.created_at
          );

          this.first_answer_time = this.getTimeDifference(
            res.data.message.first_answer_time,
            res.data.message.created_at
          );
          // 将毫秒转换为分钟
          /*   else {
             this.$message({
               message: "暂无更多消息",
               type: "warning",
             });
           } */
        })
        .finally((_) => {
          this.loading = false;
        });
    },

    getTimeDifference(time1Str, time2Str) {
      const time1 = new Date(time1Str);
      const time2 = new Date(time2Str);
      const diffMs = Math.abs(time1 - time2); // 计算毫秒差并取绝对值
      const diffSeconds = diffMs / 1000; // 转换为秒

      if (diffSeconds >= 43200) {
        // 12小时 = 43200秒
        const days = Math.floor(diffSeconds / 43200);
        return `${days}天`;
      } else if (diffSeconds >= 3600) {
        // 1小时 = 3600秒
        const hours = Math.floor(diffSeconds / 3600);
        return `${hours}小时`;
      } else if (diffSeconds >= 60) {
        // 1分钟 = 60秒
        const minutes = Math.floor(diffSeconds / 60);
        return `${minutes}分钟`;
      } else {
        const seconds = Math.floor(diffSeconds);
        return `${seconds}秒`;
      }
    },
  },
  created() {},
  mounted() {},
};
</script>
<style lang="less" scoped>
/deep/.el-dialog {
  max-height: 90%;
  overflow: auto;
}

.content {
  padding: 10px;
  line-height: 1.5rem;
}

.doctor {
  color: #0000ff;
}
.patient {
  color: #159879;
}
.messageList {
  width: 100%;
  height: 400px;
  overflow: auto;
}
</style>
